<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>CPA数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>客户&渠道管理</el-breadcrumb-item>
      <el-breadcrumb-item>投放管理</el-breadcrumb-item>
    </el-breadcrumb>
    <Container class="u-mb15">
      <el-form
        inline
        class="m-form--filter"
      >
        <el-form-item>
          <el-select
            size="mini"
            class="u-w160"
            v-model="channel_items.model_value"
            :placeholder="channel_items.placeHolder"
            filterable
            @change="select('3',channel_items.model_value)"
          >
            <el-option
              v-for="item in channel_items.options"
              :key="item.channelCode"
              :label="item.name"
              :value="item.channelCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            size="mini"
            class="u-w160"
            v-model="customer_items.model_value"
            :placeholder="customer_items.placeHolder"
            filterable
            @change="select('1',customer_items.model_value)"
          >
            <el-option
              v-for="item in customer_items.options"
              :key="item.customerCode"
              :label="item.name"
              :value="item.customerCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            size="mini"
            class="u-w160"
            v-model="pro_items.model_value"
            :placeholder="pro_items.placeHolder"
            @change="select('2',pro_items.model_value)"
            filterable
          >
            <el-option
              v-for="item in pro_items.options"
              :key="item.productCode"
              :label="item.productName"
              :value="item.productCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            size="mini"
            class="u-w160"
            v-model="channelPro_items.model_value"
            :placeholder="channelPro_items.placeHolder"
            @change="select('4',channelPro_items.model_value)"
            filterable
          >
            <el-option
              v-for="item in channelPro_items.options"
              :key="item.customerProductCode"
              :label="item.productChannelCode"
              :value="item.customerProductCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="businessTypeModel"
            size="mini"
            class="u-w160"
            filterable
            clearable
            placeholder="业务类型"
            @change="pageInfo"
          >
            <el-option
              v-for="item in BUSINESS_TYPE"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            size="mini"
            class="u-w160"
            v-model="value"
            placeholder="请输入上游渠道号"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            @click="search"
          >搜索</el-button>
        </el-form-item>
      </el-form>
    </Container>

    <Container>
      <el-form
        inline
        class="m-table--handle"
      >
        <el-form-item>
          <el-upload
            :action="apiUrl.uploadChannelProduct"
            :with-credentials="true"
            :on-success="handleSuccess"
            :on-progress="uploading"
            :beforeUpload="beforeAvatarUpload"
            :onError="uploadError"
            :show-file-list="false"
            :file-list="fileList"
          >
            <el-button size="mini">导入数据</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            @click="newPro"
          >新建产品</el-button>
        </el-form-item>
        <CustomTableColumn :columns.sync="tableColumn" />
      </el-form>

      <el-table
        v-loading="loading"
        element-loading-text="拼命上传中"
        :data="tableData"
        border
        stripe
      >
        <el-table-column
          align="center"
          v-for="(c, i) in filterTableColumn"
          :key="i"
          :fixed="c.fixed"
          :sortable="c.sortable"
          :prop="c.prop"
          :label="c.label"
          :formatter="c.format"
          :width="c.width"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <span
              @click.stop="exitEvent(scope.row.id)"
              class="u-cursor u-mr10"
            >编辑</span>
            <span
              @click.stop="delpro(scope.row.channelProductCode)"
              class="u-cursor"
            >删除</span>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.currentPage"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, prev, pager, next, sizes, jumper"
        :total="page.count"
      >
      </el-pagination>
    </Container>
    <el-dialog
      title="提示"
      :visible.sync="importTitleStatus"
    >
      <div
        style="max-height: 400px; overflow: auto; line-height: 28px; margin-top: -20px;"
        v-html="importTitleTxt"
      ></div>
    </el-dialog>
  </div>
</template>

<script>
import Container from "@/components/container";
import CustomTableColumn from "@/components/custom-table-column";
import BusinessTypeMixin from "@/mixins/business-type";
export default {
  name: "cpa-channel-pro",
  components: {
    Container,
    CustomTableColumn
  },
  mixins: [BusinessTypeMixin],
  data() {
    return {
      tableColumn: [
        {
          fixed: true,
          prop: "channelProductCode",
          label: "产品包渠道代码",
          sortable: true,
          visible: false,
          width: 160
        },
        {
          prop: "customerName",
          label: "客户名称",
          visible: true
        },
        {
          prop: "productName",
          label: "产品名称",
          visible: true,
          width: 120
        },
        {
          label: "业务类型",
          prop: "cooperativeMode",
          visible: true
        },
        {
          prop: "productChannelCode",
          label: "上游渠道号",
          visible: true,
          width: 280
        },
        {
          prop: "kyProductChannelCode",
          label: "康远渠道号",
          visible: false,
          width: 150
        },
        {
          prop: "channelName",
          label: "渠道",
          visible: true
        },
        {
          prop: "status",
          label: "包状态",
          visible: true,
          format: function(row) {
            switch (row.status) {
              case 0:
                return "未封包";
              case 1:
                return "封包";
            }
          }
        },
        //                    {fixed: false, prop: 'prodcutPackageLink', label: '产品链接', sortable: false, visible: true},
        {
          prop: "onlineTime",
          label: "上线时间",
          visible: true,
          format: function(row) {
            return row.onlineTime.split(" ")[0];
          }
        },
        {
          prop: "offlineTime",
          label: "下线时间",
          visible: true,
          format: function(row) {
            return row.offlineTime.split(" ")[0];
          }
        },
        {
          prop: "channelCurPrice",
          label: "现渠道价",
          visible: true
        }
      ],
      page: {
        sizes: [10, 50, 100, 500],
        offset: 1,
        limit: 10,
        count: 0,
        currentPage: 1
      },
      menu_nav: ["CPA数据管理", "渠道产品管理"],
      customer_items: {
        model_value: "",
        placeHolder: "客户",
        options: []
      },
      pro_items: {
        model_value: "",
        placeHolder: "产品",
        options: []
      },
      channel_items: {
        model_value: "",
        placeHolder: "渠道",
        options: []
      },
      channelPro_items: {
        model_value: "",
        placeHolder: "上游渠道号",
        options: []
      },
      params: {
        type: "",
        val: ""
      },
      tableData: [],
      importTitleStatus: false,
      importTitleTxt: "",
      fileList: [],
      loading: false,
      value: "",
      businessTypeModel: ""
    };
  },
  computed: {
    filterTableColumn() {
      return this.tableColumn.filter(item => item.visible);
    }
  },
  activated() {
    this.customer_items.model_value !== "" ||
    this.channel_items.model_value !== ""
      ? this.pageInfo()
      : null;
  },
  created() {
    this.channelInfo();
  },
  methods: {
    channelInfo() {
      /*渠道*/
      this.$http({
        method: "get",
        url: this.apiUrl.channelSearch,
        params: {
          offset: 1,
          limit: 9999,
          val: ""
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            data.items.length > 0
              ? (this.channel_items.options = data.items)
              : null;
          }
        })
        .catch(() => {});
    },
    customerInfo() {
      /*客户*/
      this.$http({
        method: "get",
        url: this.apiUrl.channelProListCustomer,
        params: {
          channelCode: this.channel_items.model_value
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.customer_items.options = data.customerItems;
          }
        })
        .catch(() => {});
    },
    proInfo() {
      /*产品*/
      this.$http({
        method: "get",
        url: this.apiUrl.channelProList,
        params: {
          customerCode: this.customer_items.model_value,
          channelCode: this.channel_items.model_value
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.pro_items.options = data.items;
          }
        })
        .catch(() => {});
    },
    channelPro() {
      /*上游渠道号*/
      this.$http({
        method: "get",
        url: this.apiUrl.channelProListPack,
        params: {
          productCode: this.pro_items.model_value,
          channelCode: this.channel_items.model_value
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.channelPro_items.options = data.items;
          }
        })
        .catch(() => {});
    },
    //搜索
    search() {
      if (!this.value) {
        this.$message({
          type: "info",
          message: "请输入上游渠道号"
        });
      } else {
        /*渠道产品list*/
        this.$http({
          method: "get",
          url: this.apiUrl.channelProSearchByPackageCode,
          params: {
            code: this.value
          }
        })
          .then(res => {
            if (res.status == 200) {
              var data = res.data;
              this.page.count = data.totalNums;
              this.tableData = data.items;
            }
          })
          .catch(() => {});
      }
    },
    pageInfo() {
      /*渠道产品list*/
      this.$http({
        method: "get",
        url: this.apiUrl.channelProSearch,
        params: {
          offset: this.page.offset,
          limit: this.page.limit,
          type: this.params.type != 3 ? this.params.type : null,
          code: this.params.type != 3 ? this.params.val : null,
          channelCode: this.channel_items.model_value,
          bizType: this.businessTypeModel
        }
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            this.page.count = data.totalNums;
            this.tableData = data.items;
            if (this.pro_items.model_value == "") {
              this.channelPro_items.options = [];
              this.channelPro_items.model_value = "";
            }
          }
        })
        .catch(() => {});
    },
    handleCurrentChange(val) {
      this.page.offset = val;
      this.pageInfo();
    },
    handleSizeChange(val) {
      this.page.limit = val;
      this.pageInfo();
    },
    newPro() {
      this.$router.push({
        path: "/cpa/channel-pro-detail",
        query: { channelProductId: "" }
      });
    },
    exitEvent(id) {
      this.$router.push({
        path: "/cpa/channel-pro-detail",
        query: { channelProductId: id }
      });
    },
    select(type, val) {
      if (val != "" && typeof val != "undefined") {
        this.params.type = type;
        this.params.val = val;
        switch (type) {
          case "3":
            this.customer_items.model_value = this.pro_items.model_value = this.channelPro_items.model_value =
              "";
            this.pro_items.options = this.channelPro_items.options = [];
            this.customerInfo();
            break;
          case "1":
            this.pro_items.model_value = this.channelPro_items.model_value = "";
            this.channelPro_items.options = [];
            this.proInfo();
            break;
          case "2":
            this.channelPro_items.model_value = "";
            this.channelPro();
            break;
        }
        this.pageInfo();
      }
    },
    deleteBill(id) {
      this.$confirm("此操作将永久删除该产品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            method: "delete",
            url: this.apiUrl.channelProDel,
            params: { id: id }
          })
            .then(res => {
              if (res.status == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.pageInfo();
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!"
                });
              }
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "删除失败!"
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    clientSql() {
      if (this.channelPro_items.model_value !== "") {
        this.page.count = 1;
        this.tableData = [];
        this.tableData.push(
          this.channelPro_items.options[this.channelPro_items.model_value]
        );
      }
    },
    exitImportTitle() {
      this.importTitleStatus = false;
      this.pageInfo();
    },
    delpro(channelProductCode) {
      this.$confirm("此操作将永久删除所选行, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            method: "get",
            url: this.apiUrl.channelProDelNew,
            params: { channelProductCode: channelProductCode }
          })
            .then(res => {
              if (res.data && res.data.status == 1) {
                this.$message({
                  type: "success",
                  message: res.data.msg
                });
                this.pageInfo();
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg
                });
              }
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "删除失败!"
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
